<template>
    <div  >
        <div style="margin: 20px ;">
            <div style="margin: 20px 10px">
                <el-input v-model="search" style="width: 20%" clearable placeholder="请输入内容查询"></el-input>
                <el-button type="primary" style="margin: 0 10px" @click="load">查询</el-button>
            </div>

            <el-table :data="tableData" stripe style="width: 100%" tooltip-effect="dark">
                <el-table-column prop="id" label="ID" sortable align="center"></el-table-column>
                <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="bookName" label="书名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="reply" label="回复" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="留言时间" align="center"></el-table-column>
                <el-table-column prop="gmtModified" label="回复时间" align="center"></el-table-column>
                <!--<el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete( scope.row.id)">
                            <template #reference>
                                <el-button type="text" style="color: #ff4268">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>-->
            </el-table>
            <div style="margin: 20px 10px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"></el-pagination>
            </div>


        </div>
    </div>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "userMessage",
        components: {},
        created() {
            this.load()
        },
        methods: {
            load() {
                request.get("/message", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load();
            },
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },
        },

        data() {
            return {
                search: '',
                form: {},
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: []

            }
        },
    }
</script>

<style scoped>

</style>